
<template>
  <h5>{{ msg }}</h5>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <!--  
    <p>
      Edit<code>components/HelloWorld.vue</code> to test HMR
    </p> 
    -->
    <!-- <my-component />    -->
  </div>
  <div class="hello">
    <p>组件A</p>
    <!--  <p>name:{{ store.$state.name }}</p> -->
    <p>name:{{ store.name }}</p>
    <p>num: {{ store.num }}</p>
    <p>arr: {{ store.arr }}</p>
    <p>{{ getNum }}</p>
    <p>{{ getShopList }}</p>
    <p>{{ getNum }}</p>
    <button @click="changeName">修改名称</button>
  </div>
  <p></p>
</template>

<script setup lang="ts">
// import MyComponent from '../jsx/MyComponent.jsx'
import { reactive, ref, toRefs } from "vue";
defineProps<{ msg: string }>();
const count = ref(0);
import { useStore } from "../stores/index";
import { storeToRefs } from "pinia";
const store = useStore();

/* 
const changeName = ()=>{
  store.num++
  store.name="哈哈"
} */
let { name, num, arr, getNum, getShopList } = storeToRefs(store);
/* 
const changeName = () => {
  name.value +="!"; 
  num.value++;
};  */
/* const changeName = () => {
  store.$patch(() => {
    num.value ++;
    name.value += "!";
    arr.value.push(arr.value.length+1);
  });
}; */
/* const changeName = () => {
  store.$patch((state) => {
    state.num ++;
    state.name += "!";
    state.arr.push(state.arr.length+1);
  });
}; 
*/
const changeName = () => {
  store.setNum(1);
};
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
